<!-- src/components/MerchantCard.vue -->
<template>
	<view class="merchant-item" @click="goToMerchant">
		<image class="merchant-logo" :src="merchant.banner" mode="aspectFill"></image>
		<view class="merchant-info">
			<view class="text-bold text-df">{{ merchant.name }}</view>

			<view class="flex align-center text-xs text-gray margin-top-xs">
				<text class="text-orange margin-right-xs">{{ merchant.rating }}分</text>
				<text>月售{{ merchant.monthlySales }}+</text>
				<text class="margin-left-auto">{{ merchant.distance }}</text>
			</view>

			<view class="flex align-center text-xs text-gray margin-top-xs">
				<text>起送 ¥0</text>
				<text class="margin-lr-xs">|</text>
				<text>免配送费</text>
			</view>
			
			<view class="margin-top-sm">
				<view class="cu-tag sm round light bg-orange" v-for="tag in merchant.tags" :key="tag">{{ tag }}</view>
			</view>

		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	merchant: {
		type: Object,
		required: true,
	},
});

const goToMerchant = () => {
	uni.navigateTo({
		url: '/pages/merchat/index?id=' + props.merchant.id,
	});
};
</script>

<style scoped>
.merchant-item {
	display: flex;
	padding: 24rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f1f1f1;
}
.merchant-logo {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 24rpx;
}
.merchant-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}
</style>